Create a modern, responsive, professional restaurant website using only HTML, CSS, and vanilla JavaScript. Do not use PHP, databases, APIs, backend services, or unnecessary external dependencies.

Main Goal
Build a visually attractive restaurant website that presents the restaurant, menu, services, location, contact information, and other important details in a professional and user-friendly way.

The website should be lightweight, fast-loading, mobile-friendly, SEO-friendly, and suitable for uploading directly to any static web hosting service.

Website Design
Use a modern restaurant-style design with:

Clean and elegant layout
Professional typography
Attractive color palette suitable for a restaurant
Responsive design for desktop, tablet, and mobile
High-quality food image placeholders
Modern hero section
Card-based menu sections
Smooth hover and transition effects
Rounded corners where appropriate
Subtle shadows
Clear call-to-action buttons
Accessible navigation
Mobile-friendly hamburger menu
Consistent header and footer across all pages
The overall design should feel premium, appetizing, welcoming, and trustworthy.

Pages
Create the following separate pages:

Home – Restaurant homepage
About Us – Restaurant story and information
Menu – Food and drink menu
Gallery – Restaurant and food images
Contact Us – Contact information and location
Privacy Policy
Disclaimer
Terms and Conditions
Home Page
Create an attractive homepage containing:

Header
Include:

Restaurant logo/name
Navigation menu
Home
About
Menu
Gallery
Contact
Prominent View Menu or Order Now button
Mobile hamburger menu
Make the header sticky on scroll.

Hero Section
Create a visually impressive hero section containing:

Large restaurant headline
Short description
Primary CTA button: View Our Menu
Secondary CTA button: Contact Us
Large food/restaurant image
Elegant background overlay
Example headline:

Delicious Food, Made With Passion

Example description:

Fresh ingredients, authentic flavors, and unforgettable dining experiences—all served with care.

About Preview Section
Add a homepage section introducing the restaurant.

Include:

Short restaurant description
Restaurant image
“Learn More” button
Information about the restaurant’s philosophy
Fresh ingredients
Quality food
Friendly service
Featured Menu Section
Create a Featured Dishes section.

Display food items in attractive cards.

Each card should include:

Food image
Food name
Short description
Price
Optional category/tag
“Order Now” or “View Menu” button
Example:

Classic Burger — $8.99
Chicken Biryani — $10.99
Grilled Chicken — $11.99
Margherita Pizza — $9.99
Creamy Pasta — $10.49
Chocolate Cake — $5.99
Use placeholder images that can easily be replaced later.

Why Choose Us
Create a section explaining why customers should choose the restaurant.

Include 4 feature cards:

Fresh Ingredients
We use carefully selected ingredients to prepare delicious meals.

Experienced Chefs
Our dishes are prepared with skill, passion, and attention to detail.

Great Atmosphere
Enjoy a comfortable and welcoming environment.

Excellent Service
Our team is committed to providing friendly and professional service.

Use simple icons created with HTML/CSS or inline SVG. Do not depend on external icon libraries unless absolutely necessary.

Menu Page
Create a complete restaurant menu page.

Organize menu items into categories such as:

Starters
Chicken Wings
French Fries
Garlic Bread
Chicken Soup
Main Course
Chicken Biryani
Grilled Chicken
Beef Steak
Chicken Curry
Fish & Chips
Pizza
Margherita Pizza
Chicken Pizza
Beef Pizza
Vegetable Pizza
Pasta
Alfredo Pasta
Chicken Pasta
Spaghetti Bolognese
Desserts
Chocolate Cake
Cheesecake
Ice Cream
Brownie
Drinks
Fresh Lemonade
Orange Juice
Coffee
Soft Drinks
Each menu item should contain:

Food name
Description
Price
Optional image
Add category navigation buttons so users can quickly jump to different menu sections.

Gallery Page
Create a beautiful responsive food gallery.

Include:

Food photos
Restaurant interior photos
Chef/kitchen photos
Dining area photos
Use a responsive CSS grid.

Add hover effects to images.

If possible, implement a lightweight JavaScript image lightbox that allows users to click an image and view it larger.

The gallery must work without any external library.

About Us Page
Create a professional restaurant story.

Include sections for:

Our Story
Explain how the restaurant started and its mission.

Our Philosophy
Explain the restaurant’s commitment to:

Fresh ingredients
Quality
Authentic flavors
Customer satisfaction
Our Chefs
Introduce the restaurant’s culinary team using placeholder information.

Our Values
Include:

Quality
Freshness
Hospitality
Passion
Contact Us Page
Do not create a contact form.

Instead, create a professional contact-information section.

Include:

Get in Touch
If you have questions, feedback, reservations, or business inquiries, feel free to contact us.

Phone: +1 234 567 890
Email: your@email.com
Address: 123 Main Street, Your City, Country

Use placeholder information so it can easily be replaced later.

Also include:

Opening Hours
Monday – Friday: 10:00 AM – 10:00 PM
Saturday: 10:00 AM – 11:00 PM
Sunday: 11:00 AM – 9:00 PM

Create a Get Directions button.

Do not embed Google Maps or use an external API. Instead, provide a placeholder link that can be replaced later.

Reservation Section
Add a simple reservation CTA section.

Do not create a backend reservation system.

Instead, provide a button such as:

Call to Reserve

The button should use a tel: link.

Also provide:

Email for Reservations

using a mailto: link.

Clearly indicate that these are placeholder contact methods that the restaurant owner can customize.

Customer Testimonials
Create a testimonials section containing 3–6 sample customer reviews.

Each testimonial should include:

Customer name
Short review
Star rating
Optional avatar placeholder
Example:

“Amazing food, friendly staff, and a wonderful atmosphere. We’ll definitely come back!”

Do not claim these are real reviews. Clearly structure them as placeholder/demo testimonials that can be replaced with genuine customer feedback.

Call-to-Action Section
Create a visually attractive CTA section near the bottom of the homepage.

Example:

Ready for a Delicious Experience?

Come visit us and enjoy freshly prepared food made with passion.

Buttons:

View Menu

Contact Us

Footer
Create a consistent footer on every page.

Include:

Restaurant Information
Restaurant name and short description.

Quick Links
Home
About
Menu
Gallery
Contact
Contact
Phone
Email
Address
Opening Hours
Display restaurant opening hours.

Legal
Privacy Policy
Disclaimer
Terms and Conditions
Social Media
Add placeholder links for:

Facebook
Instagram
YouTube
TikTok
Do not use fake social media profiles. Use # placeholders that can be replaced later.

Add copyright text:

© 2026 [Restaurant Name]. All rights reserved.

Privacy Policy
Create a professional Privacy Policy explaining:

What information the website collects
Contact information submitted through external communication methods
Cookies, if applicable
Analytics, if applicable
Third-party services, if applicable
Website security
Children’s privacy
User rights
Policy updates
Contact information
Do not make false claims.

Use placeholders where website-specific information is required.

Disclaimer
Create a professional Disclaimer explaining:

The website is provided for general informational purposes
Menu prices may change
Food availability may change
Images may be representative or placeholders
Customers should verify allergy and dietary information directly with the restaurant
Restaurant information should be confirmed before visiting
Third-party links are outside the restaurant’s control
Do not make unsupported guarantees.

Terms and Conditions
Create professional Terms and Conditions covering:

Acceptance of terms
Website usage
Acceptable use
Menu information
Pricing information
Reservations
Intellectual property
User responsibility
Third-party links
Service availability
Limitation of liability
Changes to the website
Changes to the terms
Contact information
SEO Requirements
Make every page SEO-friendly.

Each page must include:

Unique <title>
Unique meta description
Appropriate <meta name="robots">
Semantic HTML5
Proper heading hierarchy
Descriptive image alt attributes
Clean internal linking
SEO-friendly URLs/file names
Mobile responsive layout
Use only one <h1> per page.

Suggested titles:

Home:
Restaurant Name | Fresh Food & Great Dining

About:
About Us | Restaurant Name

Menu:
Restaurant Menu | Restaurant Name

Gallery:
Food & Restaurant Gallery | Restaurant Name

Contact:
Contact Us | Restaurant Name

Privacy:
Privacy Policy | Restaurant Name

Disclaimer:
Disclaimer | Restaurant Name

Terms:
Terms and Conditions | Restaurant Name

Technical Requirements
Use:

HTML5
CSS3
Vanilla JavaScript
Do NOT use:

PHP
MySQL
Databases
Backend services
APIs
API keys
React
Vue
Angular
Bootstrap
jQuery
Unnecessary external libraries
Organize the files cleanly:

index.html
about.html
menu.html
gallery.html
contact.html
privacy-policy.html
disclaimer.html
terms.html
style.css
script.js
images/
The website must work as a completely static website.

JavaScript Features
Use vanilla JavaScript for:

Mobile navigation
Smooth scrolling
Gallery lightbox
Menu category filtering/navigation
Sticky header behavior
Simple UI interactions
Scroll animations where appropriate
Keep JavaScript lightweight.

Do not add unnecessary functionality.

Responsive Design
The website must work properly on:

Desktop
Laptop
Tablet
Mobile phones
Use CSS media queries.

Make sure:

Navigation works on small screens
Images scale correctly
Menu cards stack properly
Text remains readable
Buttons are touch-friendly
No horizontal scrolling occurs
Accessibility
Follow basic accessibility best practices.

Include:

Semantic HTML
Proper labels
Alt text for images
Keyboard-accessible navigation
Visible focus states
Accessible buttons
Sufficient text contrast
ARIA attributes where appropriate
Performance
Keep the website lightweight.

Avoid:

Large unnecessary JavaScript files
Unnecessary libraries
Autoplay videos
Excessive animations
Blocking resources
Use lazy loading for gallery images where appropriate.

Final Goal
Build a professional, modern, responsive, SEO-friendly restaurant website that looks like a real business website and can be uploaded directly to any static hosting service.

The final website should feel:

Elegant + Modern + Appetizing + Professional + Fast + Mobile-Friendly

Make all navigation links work correctly between pages and keep the header, navigation, buttons, typography, and footer visually consistent throughout the entire website.

Use realistic placeholder restaurant content and clearly marked placeholder contact details so the website owner can easily customize everything later.